<!--
 * @description:
 * @author: huangpeng
 * @date: 2023年09月06日 10:45
 * @Copyright:  2022-2023
!-->
<template>
  <div class="main-anchor">
    <el-tabs v-model="activeTab" @tab-click="handleTabClick">
      <el-tab-pane name="blog">
        <span slot="label">
          <i class="el-icon-s-data"/>TA的文章
        </span>
      </el-tab-pane>
      <el-tab-pane name="followMe">
        <span slot="label">
          <svg-icon icon-class="fan" />关注TA的
        </span>
      </el-tab-pane>
      <el-tab-pane name="follow">
        <span slot="label">
          <svg-icon icon-class="followed-black" />TA关注的
        </span>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script lang="ts">
import { Vue, Component, Watch, Prop } from "vue-property-decorator";
@Component({})
export default class searchType extends Vue {

  @Watch('userId', {deep: true})
  handleUserIdChange(newVal: any, oldVal: any) {
    this.activeTab = 'blog';
  }

  @Prop()
  private userId: any;

  /** 当前tab */
  private activeTab: string = 'blog';

  /** 点击tab */
  private handleTabClick(item: string) {
    this.$emit('handleTabClick', this.activeTab)
  }

}
</script>
<style scoped lang="scss">
.main-anchor {
  height: 40px;
  line-height: 40px;
  width: 100%;
  ::v-deep .el-tabs__item {
    //color: rgba(0, 0, 0);
  }
  ::v-deep .el-tabs__nav {
    text-align: center;
    width: 100%;
  }
  ::v-deep .el-tabs__item {
    font-size: 18px;
    padding: 0 10px !important;
  }
  ::v-deep .el-tabs__active-bar {
    width: 0 !important;
  }
}
</style>
